<template>
  <div class="news">
    <div class="news-item flex ai-center cursor-pointer" v-for="item in newsList" @click="showDetail(item)">
      <div class="news-tag" :class="`type-${item.type}`">
        <dict-tag :options="dict.type.sys_notice_type" :value="item.noticeType"/>
      </div>
      <div class="news-title flex-1 line-one">{{item.noticeTitle}}</div>
    </div>
    <el-dialog
      title="公告详情"
      :visible.sync="dialogVisible"
      width="30%">
      <div style="text-align: center;font-size: 18px;margin-bottom: 10px;">{{ detailInfo.noticeTitle }}</div>
      <div style="max-height: 500px;overflow-y: auto;">{{ detailInfo.noticeContent }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  // import { homeNotice } from '@/api/jiubu/home'
  export default{
    dicts: ['sys_notice_type'],
    data() {
      return {
        newsList:[{
            type:1,
            title:'新增内容尚未通过审核，详情详情详情详情详.'
          },{
            type:2,
            title:'新增内容尚未通过审核，详情详情详情详情详.'
          },{
            type:3,
            title:'新增内容尚未通过审核，详情详情详情详情详.'
          },{
            type:1,
            title:'新增内容尚未通过审核，详情详情详情详情详.'
          },{
            type:2,
            title:'新增内容尚未通过审核，详情详情详情详情详.'
          },{
            type:3,
            title:'新增内容尚未通过审核，详情详情详情详情详.'
          }
        ],
        detailInfo:{},
        dialogVisible:false,
      }
    },
    filters:{
      typeFilter(val){
        let obj = {
          1:'活动',
          2:'消息',
          3:'通知'
        }
        return obj[val]
      }
    },
    created() {
      this.getList()
    },
    methods:{
      showDetail(item){
        this.detailInfo = item
        this.dialogVisible = true
      },
      async getList(){
        let res = await homeNotice()
        this.newsList = res.data
      },
    }
  }
</script>

<style scoped>
  .news{
    height: 370px;
    overflow-y: auto;
  }
  .news-item{
    height: 50px;
  }
  .news-tag{
    padding:2px 6px;
    font-size: 12px;
    border-radius: 2px;
    margin-right: 6px;
  }
  .news-title{
    color: #696969;
    font-size: 14px;
  }
  .type-1{
    background: #FFF2DE;
    color: #FFB649;
  }
  .type-2{
    background: #DEF1FF;
    color: #008FFF;
  }
  .type-3{
    background: #FFE8DE;
    color: #FD2F3B;
  }
</style>
